@for $i from 1 through 60{
    .w#{$i}{
        width: #{$i}rem;
    }
}

.entry{
    display: inline-block;
    background-color: inherit;

    &-row:nth-child(2n){
        background-color: #DADADA;
    }
}

.num{
    text-align: right;
}

.header{
    border-bottom: 2px solid black;
    font-weight: bold;

    & > .entry{
        cursor: pointer;
    }
}

.ascending::after{
    content: "\25B2"; //arrow up
}

.descending::after{
    content: "\25BC"; //arrow down
}

.tooltip{
    position: relative;
    display: inline-block;
    background-color: #A7A7A7;
    border-radius: 20px;
    padding: 0 2px;

    &::after{
        content: "\2753"; //question mark
    }

    &__text{
        visibility: hidden;
        background-color: #555;
        color: white;
        padding: 0 5px;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        margin-top: 25px;
    }

    &:hover &__text{
        visibility: visible;
    }
}

h1{
    text-transform: uppercase;
}

%absolute-centered{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.flash{
    @extend %absolute-centered;
    padding: 5px;
    font-size: 2rem;
    font-weight: 900;
    animation: 5s linear flash-frames forwards;
    border-radius: 5px;

    &--error{
        background-color: #FF0000;
    }

    &--info{
        background-color: #FFFF5F;
    }

    &--success{
        background-color: #4DBE4D;
    }

    &--message{
        //default when no flash style was set
        background-color: #6A6AFF;
    }
}

@keyframes flash-frames{
    0%   { margin-top: 0; }
    80%  { margin-top: 0; }
    100% { margin-top: -300px; }
}

.model-tile{
    display: inline-block;
    padding: 5px;
    margin: 5px 0 0 5px;
    background-color: #C2C2C2;

    &--wanted{
        background-color: #a9ff98;
    }

    & > img{
        object-fit: cover;
        width: 100%;
        height: 7.5rem;
    }
}

.nav-bar{
    background-color: #90db64;
    height: 3rem;
    display: flex;
    margin-bottom: 1rem;

    & > a {
        display: inline-flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        color: rgb(0, 0, 0);
        font-weight: bolder;
        font-size: 1.3rem;
        text-decoration: none;

        &.break{
            margin-left: auto;
        }

        &.active{
            background-color: rgb(138, 212, 126);
        }
    }
}